<template>
    <div class="varrow">
        <span class="top"></span>
        <span class="bottom"></span>
    </div>
</template>

<script>
    'use strict';

    export default {
        name: "v-arrow",
        props: {
            top: {
                type: Boolean,
                default: () => {
                    return false;
                }
            },
            bottom: {
                type: Boolean,
                default: () => {
                    return false;
                }
            }
        },
        data() {
            return {}
        },
        computed: {},
        methods: {},
        created() {
        },
        mounted() {
        }
    }
</script>

<style lang="scss" scoped>

    @import '../../common/css/theme.sass';

    $maxHeight: 20px;
    $borderColor: $maxHeight / 3 $themeColor;

    .varrow{
        height: $maxHeight;
        width: $maxHeight / 2;

        span{
            display: inline-block;
            width: 0;
            height: 0;

            border: $maxHeight / 3 transparent solid;
            position: absolute;

            &.top{
                border-top: $borderColor solid;
                border-bottom-width: 0;
                top: 0;
            }

            &.bottom{
                border-bottom: $borderColor solid;
                border-top-width: 0;
                bottom: 0;
            }


        }

    }

</style>
